<template>
	<div class="login">
		<div class="row-me center-all width100Per height100Per">
			<div class="ms-login">
				<div class="posRelative" style="width: 55%;">
					<img src="@/assets/images/zuo.png" class="width100Per height100Per" />
					<div class="left">
						<div class="text1">WELCOME</div>
						<div class="text2">刷题帮后台管理系统</div>
					</div>
				</div>
				<div class="flex1 bgcfff height100Per width100Per">
					<div class="ms-title row-me center-all">
						<h4 class="colorBlue font-size20">欢迎登录「刷题帮」管理中心</h4>
					</div>
					<div class="color3a3a3d  row-me center-all">「刷题帮」刷题帮助力机构招生和提升口碑</div>
					<el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
						<el-form-item prop="loginName">
							<el-input class="a" v-model="param.loginName" placeholder="用户名">
							</el-input>
						</el-form-item>
						<el-form-item prop="password">
							<el-input class="b" type="password" placeholder="密码" v-model="param.password"
								@keyup.enter.native="submitForm()">
							</el-input>
						</el-form-item>
						<div class="login-btn">
							<el-button type="primary" @click="submitForm()">登录</el-button>
						</div>
					</el-form>
				</div>
			</div>
		</div>
	</div>
</template>


<script>
	import {
		setSupport,
		getSupport,
		setCookie,
		getCookie
	} from '@/utils/support';
	export default {
		data() {
			return {
				param: {
					loginName: '',
					password: ''
				},
				rules: {
					loginName: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			submitForm() {
				var vm = this;
				this.$refs.login.validate(valid => {
					if (valid) {
						localStorage.removeItem('token');
						localStorage.removeItem('appid');
						localStorage.removeItem('appName');
						localStorage.removeItem('user');
						vm.$store.dispatch('Login', {
							loginName: vm.param.loginName,
							password: vm.param.password
						}).then(() => {
							setCookie("username", vm.param.loginName, 15);
							setCookie("password", vm.param.password, 15);
							vm.$router.push({
								path: '/'
							})
						}).catch((error) => {
							console.log(error, "error")
						})

					} else {
						vm.$message.error('请输入账号和密码');
						return false;
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.login {
		width: 100vw;
		height: 100vh;
		background-image: url('../../assets/images/beijing.png');
		background-size: 100%;

		.ms-login {
			display: flex;
			width: 62%;
			height: 56%;
		}

		.ms-title {
			display: flex;
			margin-top: 15%;
			width: 100%;
			height: 10%;

			.blueline {
				width: 1.5%;
				height: 70%;
				background: #5f77c1;
				border-radius: 2px;
				margin-right: 10%;
				margin-left: 10%;
			}

			.text3 {
				font-size: 30px;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #222222;
			}
		}

		.left {
			position: absolute;
			left: 10%;
			top: 5%;

			.text1 {
				font-size: 60px;
				font-family: Arial;
				font-weight: bold;
				color: #ffffff;
			}

			.text2 {
				font-size: 46px;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #f1f1f1;
				margin-top: 10%;
			}
		}

		.ms-content {
			padding: 30px 30px;
		}

		.login-btn {
			text-align: center;
		}

		.login-btn button {
			width: 100%;
			height: 36px;
			margin-bottom: 10px;
		}

		.login-tips {
			font-size: 12px;
			line-height: 30px;
			color: #fff;
		}

		::v-deep .el-input__inner {
			height: 40px;
			padding: 0px 50px;
		}

	}
</style>